<template>
  <div>
    <el-dialog title="新增车辆工单" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="ruleForm" :model="ruleForm" label-position="right" label-width="120px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="车架号:" prop="vinNo" :rules="rules.vinNo">
              <el-autocomplete v-model.trim="ruleForm.vinNo" style="width: 100%"
                               :fetch-suggestions="requireQuerySearchAsync" placeholder="请输入车架号"
                               :trigger-on-focus="false"
                               @select="handleSelect">
                <template slot-scope="{ item }">
                  <div class="product-item">
                    <div class="name">
                      <span>{{ item.vinNo }}</span>
                    </div>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号:" prop="carNo" :rules="rules.carNo">
              <el-autocomplete v-model.trim="ruleForm.carNo" style="width: 100%"
                               :fetch-suggestions="requireQuerySearchAsyncCarNo" placeholder="请输入车牌号"
                               :trigger-on-focus="false"
                               @select="handleSelect">
                <template slot-scope="{ item }">
                  <div class="product-item">
                    <div class="name">
                      <span>{{ item.carNo }}</span>
                    </div>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="订单编号:">
              <el-input v-model="ruleForm.orderCode" disabled size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称:" disabled>
              <el-input v-model="ruleForm.customerName" disabled size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="品牌/车型/车款:">
              <div style="display: flex">
                <el-input v-model="ruleForm.aaa" disabled/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆归属:" prop="ascription" :rules="rules.ascription">
              <el-input v-model="ruleForm.ascription" disabled size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="车辆状态:" prop="businessType" :rules="rules.businessType">
              <el-input v-model="ruleForm.businessName" disabled size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购禀议号:" prop="procurementReportNumber">
              <el-input v-model="ruleForm.procurementReportNumber" disabled size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="合同禀议号:" prop="contractReportNumber">
              <el-input v-model="ruleForm.contractReportNumber" disabled size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <car-table ref="refCarTable"/>
  </div>
</template>

<script>
import {
  submitCarWorkOrder,
  getVinNo,
  findCarOrderVoByCarId,
  findCarListByCarNo,
} from "@/api/cwgd/addCarList.js";
import LinkageSelect from "../../../components/linkageSelect.vue";

export default {
  name: "addDialog", //新增
  dicts: ["car_business_type"],
  components: {
    LinkageSelect,
    carTable: () => import("./carTable.vue"),
  },
  computed: {},
  watch: {},
  data() {
    return {
      open: false,
      ruleForm: {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascription: "",
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        businessName: "",
        carId: 0,
        aaa: "",
        workOrderType: 0,
        contractType: "",
        orderId: "",
      },
      message: "请输入车架号",
      rules: {
        vinNo: [{required: true, message: "请输入车架号", trigger: "blur"}],
        carNo: [{required: true, message: "请输入车牌号", trigger: "blur"}],
        orderCode: [
          {required: true, message: "请输入订单编号", trigger: "blur"},
        ],
        customerName: [
          {required: true, message: "请输入客户名称", trigger: "blur"},
        ],
        ascription: [
          {required: true, message: "请输入车辆归属", trigger: "blur"},
        ],
        businessType: [
          {required: true, message: "请输入车辆状态", trigger: "blur"},
        ],
      },
      linkageList: [],
      carNoList: [],

    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleFocus() {
      this.$refs.refCarTable.handleOpen();
    },

    linkageChange(val) {
      this.linkageList = val;
      if (val) {
        this.ruleForm.brandName = val[0] ? val[0].name : "";
        this.ruleForm.seriesName = val[1] ? val[1].name : "";
        this.ruleForm.modelName = val[2] ? val[2].name : "";
        this.$refs.ruleForm.clearValidate("clearValidate");
      } else {
        this.ruleForm.brandName = "";
        this.ruleForm.seriesName = "";
        this.ruleForm.modelName = "";
      }
      this.$forceUpdate();
    },
    handleOpen(val) {
      this.ruleForm = {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascription: "",
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        businessName: "",
        carId: 0,
        aaa: "",
        workOrderType: 0,
        contractType: "",
        orderId: "",
      };
      this.ruleForm.workOrderType = val;
      this.open = true;
    },

    cancel() {
      this.ruleForm = {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascription: "",
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        businessName: "",
        carId: 0,
        aaa: "",
        workOrderType: 0,
        contractType: "",
        orderId: "",
      };
      this.linkageList = [];
      this.open = false;
    },

    async requireQuerySearchAsync(queryString, cb) {
      let results = []
      const res = await getVinNo(queryString);
      if (res.code === 200) {
        results = res.data;
      } else {
        results = [];
      }

      if (results === 0) {
        this.ruleForm.vinNo = "";
      }
      cb(results);
    },

    handleSelect(val) {
      if (val) {
        this.ruleForm.carId = val.carId;
        this.ruleForm.carNo = val.carNo;
        this.ruleForm.vinNo = val.vinNo;
        this.ruleForm.modelName = val.modelName;
        this.ruleForm.aaa = `${val.brandName}/${val.seriesName}/${val.modelName}`;
        this.ruleForm.seriesName = val.seriesName;
        this.ruleForm.brandName = val.brandName;
        this.ruleForm.businessName = this.dict.type.car_business_type
            .map((a) => {
              if (a.value === val.businessType) {
                return a.label;
              }
            })
            .filter((i) => i)[0];
        this.ruleForm.businessType = val.businessType;
        findCarOrderVoByCarId(val.carId).then((res) => {
          if (res.code === 200) {
            const obj = res.data;
            this.ruleForm.orderCode = obj?.orderCode;
            this.ruleForm.customerName = obj?.customerName;
            this.ruleForm.ascription = obj?.ascription;
            this.ruleForm.ascriptionId = obj?.ascriptionId;
            this.ruleForm.contractReportNumber = obj?.contractReportNumber;
            this.ruleForm.procurementReportNumber = obj?.procurementReportNumber;
            this.ruleForm.orderChildId = obj?.orderChildId;
            this.ruleForm.contractNo = obj?.contractNo;
            this.ruleForm.contractType = obj?.contractType;
            this.ruleForm.orderId = obj?.orderChildId;
          }
        });
      }
    },

    async requireQuerySearchAsyncCarNo(queryString, cb) {
      let results = []
      const res = await findCarListByCarNo(queryString);
      if (res.code === 200) {
        results = res.data;
      } else {
        results = [];
      }
      if (results.length === 0) {
        this.ruleForm.carNo = "";
      }
      cb(results);
    },

    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          delete this.ruleForm.aaa;
          submitCarWorkOrder(this.ruleForm).then((res) => {
            if (res.code === 200) {
              this.$emit("change");
              this.$message.success("新增成功");
              this.open = false;
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang=""></style>


